import React from 'react';
import { Card, Row, Col, Form, Input, Button } from 'antd';

const formItemLayout = {
    labelCol: {
        span: 8
    },
    wrapperCol: {
        span: 16
    }
};
const FormItem = Form.Item;

class SearchBar extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        expand: true
      };
    }

    renderBtn() {
        return (
          <FormItem
            {...formItemLayout}
          >
            <Button type="primary" >搜索</Button>
            <Button htmlType="reset" style={{ marginLeft: 20 }}>重置</Button>
          </FormItem>
        );
      }
    
    render(){
        const { form } = this.props;
        const { expand } = this.state;
        const { getFieldDecorator } = form;
        return (
          <Card>
            <Form layout="horizontal">
              <Row gutter={16}>
                <Col span="8">
                  <FormItem
                    label="名称"
                    {...formItemLayout}
                        >
                    {getFieldDecorator('orderNo', {
                            initialValue: ''
                        })(<Input placeholder="请输入名称" />)
                        }
                  </FormItem>
                </Col>
                <Col span="16">
                  {expand && this.renderBtn()}
                </Col>
              </Row>
            </Form>
          </Card>
        );
    }
}

export default Form.create({})(SearchBar);